const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const _version = Date.now()
const mode = process.env.NODE_ENV
const isDev = mode === 'development'

module.exports = {
  // 保存时禁止lint检查
  lintOnSave: false,
  // 配置发布路径
  publicPath: process.env.NODE_ENV === 'production' ? '/brush-audition/' : '/',
  // 禁止生成map映射文件
  productionSourceMap: false,
  // 配置开发服务器
  devServer: {
    // 修改启动端口为3000，不再使用默认的8081端口
    port: 3000,
  },
  // 配置页面title，覆盖默认的title
  // entry为必选，其他属性为可选
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'Now, So you can brush audition q&a ~'
    }
  },
  // 打包时给静态资源文件加时间戳，防止页面缓存
  // 打包时的chunkhash和contenthash与开发环境的热更新有冲突，所有用isDev检查一下
  configureWebpack: {
    // js
    output: {
      filename: isDev ? `js/[name].js` : `js/[name].[chunkhash:8].${_version}.js`,
      chunkFilename: isDev ? `js/[name].js` : `js/[name].[chunkhash:8].${_version}.js`
    },
    // css
    plugins: [
      new MiniCssExtractPlugin({
        filename: isDev ? `css/[name].css` : `css/[name].[contenthash:8].${_version}.css`
      })
    ]
  },
  // 打包图片
  chainWebpack: config => {
    config.module
    .rule('images')
    .use('url-loader')
    .tap(options => {
      return {
        limit: 4096,
        fallback: {
          loader: 'file-loader',
          options: {
            name: isDev ? `img/[name].[ext]` : `img/[name].[contenthash:8].${_version}.[ext]`
          }
        }
      }
    })
  },
  chainWebpack: (config) => {
    config.resolve.alias
      // 配置路径别名
      .set('@routepage', path.resolve('src/pages/case-interview'))
      .set('@images', path.resolve('src/assets/images'))
  }
}